<!-- Vue单文件组件的脚本部分，使用setup语法糖简化组件逻辑 -->
<script setup>
// 从Vue导入ref和reactive函数，用于创建响应式数据
import { ref, reactive } from "vue";

// 创建布尔类型的响应式变量isActive，用于控制样式对象的动态应用
// 初始值为true，表示默认应用对应的样式
const isActive = ref(true);

// 使用reactive创建响应式样式对象activeClass
// 包含高度和背景色两个样式属性
const activeClass = reactive({
    height: '10px',           // 高度为10px
    backgroundColor: 'blue'   // 背景色为蓝色
});

// 使用reactive创建响应式样式对象borderClass
// 包含边框样式属性
const borderClass = reactive({
    border: '2px solid red'   // 2px宽的红色实线边框
});
</script>

<!-- 模板部分，定义组件的HTML结构，展示v-bind:style的数组语法用法 -->
<template>
    <!--
        第一个div：使用数组语法绑定多个样式对象
        将activeClass和borderClass两个样式对象合并应用
        最终生效的样式为：
        - height: 10px
        - backgroundColor: blue
        - border: 2px solid red
    -->
    <div v-bind:style="[activeClass, borderClass]"></div>

    <!--
        第二个div：数组中结合三元表达式动态切换样式对象
        当isActive为true时，应用activeClass样式对象
        当isActive为false时，不应用任何样式（空字符串）
        无论条件如何，始终应用borderClass样式对象
        当前isActive为true，所以效果与第一个div相同
    -->
    <div v-bind:style="[isActive ? activeClass : '', borderClass]"></div>

    <!--
        第三个div：数组中混合内联样式对象和响应式样式对象
        第一个元素是内联定义的样式对象：
        - backgroundColor: 'yellow'（黄色背景）
        - height: '20px'（高度20px）
        第二个元素是响应式样式对象borderClass（红色边框）
        最终生效的样式为三个属性的组合
    -->
    <div v-bind:style="[{ backgroundColor: 'yellow', height: '20px' }, borderClass]"></div>
</template>

<!-- 样式部分，当前组件未定义额外的CSS类样式 -->
<!-- scoped属性确保即使有样式，也只会作用于当前组件的元素 -->
<style scoped>

</style>